<template>
  <!--租房分期-->
  <el-main>
     <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>申请主体信息</span>
      </div>
      <div>
        <el-form :model="business" size="mini" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公寓名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="类型">
                <span v-if="business.type==0">个人职业房东</span>
                <span v-else>公司化公寓</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="联系人">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="申请时间">
                <span v-html="business.createTime"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人姓名">
                <span v-html="business.corporation"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <span v-html="business.certNum"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司地址">
                <span v-html="business.address"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户类型">
                <span v-html="companyAccountDetail.accountType"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户">
                <span v-html="companyAccountDetail.brankId"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="开户行">
                <span v-html="companyAccountDetail.brankName"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <img :src="business.certPicture" height="60px">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

     <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>保理申请详细信息</span>
      </div>
      <div>
        <el-table
          :data="factoringDetails"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            width="50px">
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="承租房间"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="tenantName"
            label="租客姓名">
          </el-table-column>
          <el-table-column
            prop="tenantPhone"
            label="租客手机号"
            width="120px">
          </el-table-column>
          <el-table-column
            label="月租金">
            <template slot-scope="scope">
              <span>{{scope.row.shouldMonthRent}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            label="借款周期">
            <template slot-scope="scope">
              <span>{{scope.row.factoringPeriod}}个月</span>
            </template>
          </el-table-column>
          <el-table-column
            label="保理利息">
            <template slot-scope="scope">
              <span>{{scope.row.factoringInterest}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            label="租期"
            width="180px">
            <template slot-scope="scope">
              <span>{{scope.row.borrowedStart}}至{{scope.row.borrowedEnd}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="60">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>


        <el-form style="margin: 10px;" size="mini">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="130px" label="应收租约合计">
                <span>{{factoring.rentMoney}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="130px" label="保理授信金额">
                <span>{{factoring.factoringCreditMoney}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="130px" label="服务费">
                <span>{{factoring.serviceMoney}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="130px" label="保理利息金额">
                <span>{{factoring.factoringAdditionalMoney}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="130px" label="实收保理额度合计">
                <span>{{factoring.factoringTrueMoney}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>


    <!--保理详情弹窗-->
    <el-dialog title="应收租约保理详情" :visible.sync="dialogFormVisible1">
      <el-card>
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-form :model="factoringDetail" size="mini">
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="租客姓名">
                  <span>{{cfContract.tenantName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label-width="130px" label="租客身份证号">
                  <span>{{cfContract.tenantCardNo}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="租客手机号">
                  <span>{{cfContract.tenantPhone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="待收租金合计">
                  <span>{{factoringDetail.factoringDetail.shouldMonthRent}} 元</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="应收保理金额">
                  <span>{{factoringDetail.factoringDetail.shouldMonthRent}} 元</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="保理授信比例">
                  <span>{{factoringDetail.creditLine}}%</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="保理利息">
                  <span>{{factoringDetail.factoringDetail.factoringInterest}}元</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="一次性服务费">
                  <span>{{factoringDetail.oneServiceFee}}元</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="实收保理金额">
                  <span>{{factoringDetail.factoringTrueMoney}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="退款金额">
                  <span>{{factoringDetail.refundAmount}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="租约起始时期">
                  <span>{{factoringDetail.factoringDetail.borrowedStart}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="租约终止时期">
                  <span>{{factoringDetail.factoringDetail.borrowedEnd}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="还款周期">
                  <span>{{cfContract.paymentType}}个月</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="还款账期">
                  <span>{{factoringDetail.factoringDetail.factoringPeriod}}个月</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label-width="130px" label="周期还款金额">
                  <span>{{factoringDetail.cycleAmount}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label-width="130px" label="尾款退款时间">
                  <span>{{factoringDetail.factoringDetail.borrowedEnd}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>图片信息</span>
        </div>
        <div>
          <el-form size="mini">
            <el-row>
              <el-form-item label-width="120px" label="租房合同">
                <img v-for="item in jrContractUrl" :src="item.url" height="60px">
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label-width="120px" label="租客身份证">
                <img v-for="item in jrCardsUrl" :src="item.url" height="60px">
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-dialog>

    <div style="padding: 5px;text-align: center">
      <el-button type="warning" style="margin: 10px" v-if="factoring.applyState == 1" @click="checks1(2)">初审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="factoring.applyState == 1" @click="dialogFormVisible=true">初审不通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="factoring.applyState == 2" @click="checks1(4)">复审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="factoring.applyState == 2" @click="dialogFormVisible=true">复审不通过</el-button>
    </div>
    <!--    审核不通过弹窗-->
    <el-dialog title="审核不通过原因" :visible.sync="dialogFormVisible">
      <el-form :model="check">
        <el-form-item label="审核不通过原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="check.auditMemo" autocomplete="off" placeholder="请输入审核不通过原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="factoring.applyState == 1" type="primary" @click="dialogFormVisible = false, checks1(3)">确 定</el-button>
        <el-button v-if="factoring.applyState == 2" type="primary" @click="dialogFormVisible = false, checks1(5)">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>
import {
  checks,
  factoringDetail,
  leasefactoringData
} from "@/api/banking/applicationscheck/applicationscheck";


export default {
  name: "leasefactoring",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      id:undefined,

      //商户主体
      business:{},
      //账户
      companyAccountDetail:{},
      //保理
      factoring:{},
      //保理详情集合
      factoringDetails:[],
      //查看保理详情
      factoringDetail:{
        factoringDetail:{}
      },
      jrContractUrl:[],
      jrCardsUrl:[],

      cfContract:{},
      //审核用
      check:{
        productType:3,
        applyState:undefined,
        checkId:undefined,
        auditMemo:undefined,
      }
    }
  },
  methods:{
    initData(){
      leasefactoringData({id:this.id}).then(res=>{
        console.log(res.msgData)
        var data = res.msgData;
        this.business = data.business;
        this.companyAccountDetail = data.companyAccountDetail || {}
        this.factoring = data.factoring;
        this.check.checkId = data.factoring.id;
        this.check.applyState = data.factoring.applyState;
        this.factoringDetails = data.factoringDetails;
        console.log("check",this.check)
      })
    },
    checks1(applyState){
      this.check.applyState = applyState;
      console.log("check",this.check)
      checks(this.check).then(res=>{
        // 完成按钮
        this.$message.success("审核成功")
        const obj = { path: "/banking/applicationscheck"};
        this.$tab.closeOpenPage(obj);
        // this.$tab.closePage();
      })
    },
    handleClick: function (id) {
      console.log(id);
      factoringDetail({id: id}).then(res => {
        console.log("保理详情:", res.msgData)
        var data = res.msgData;
        this.factoringDetail = data
        this.cfContract = data.cfContract
        this.jrContractUrl = data.jrContractUrl
        this.jrCardsUrl = data.jrCardsUrl
        this.dialogFormVisible1 = true;
      })

    }
  },

  created() {
    this.id = this.$route.params.id
    this.initData()
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 960px;
}
</style>
